<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <title>Title</title>
</head>
<body>
<div id="app">

<!--    <span @onclick="order()" >点击下单</span>-->
    <ol>
        <li v-for="stock in stocks" :data-id="stock.goodsId" @click ="order(stock.goodsId)" >
          {{ stock.name }}  秒杀
        </li>
    </ol>

</div>
</body>
<script>

    var app = new Vue({
        el: '#app',
        data: {
            message: 'Hello Vue!',
            stocks:[
                {
                    "name":123
                }
                ]
        },
        mounted: function(){
            console.log("mounted")
            this.getlist();
        },
        methods: {
            order: function (gid) {
                console.log("下单成功xxddd"+gid)
                let id = new Date().getTime()
                axios.get("http://127.0.0.1:8001/order/create/?gid="+gid+"&userId=110", {

                }).then(function (response) {
                    alert(response.data)
                    location.reload();
                }).catch(function (error) {
                    alert(error);
                });

            },

            getlist: function () {
                axios.get("http://127.0.0.1:8001/order/stock/list", {

                }).then(function (response) {
                    app.stocks = response.data

                    // alert(''.concat(response.data, '\r\n', response.status, '\r\n', response.statusText, '\r\n', response.headers, '\r\n', response.config));
                }).catch(function (error) {
                    alert(error);
                });
            }
        }

    })

</script>
</html>